<template>
  <div class="send-panel">
    <img class="imgBox" src="@/assets/images/user.png" alt="" v-if="loginStore.token === ''"/>
    <img class="imgBox" :src="loginStore.imageUrl" alt="" v-else/>
    <div class="input-panel">
      <template v-if="showSend">
        <el-form
          :model="formData"
          :rules="rules"active
          ref="formDataRef"
          @submit.prevent>
          <el-form-item label="" prop="" :class="['input-area',isFocused?'input-area-active':'']">
            <el-input
              clearable
              type="textarea"
              :rows="1"
              v-model="formData.content"
              show-word-limit
              :maxlength="500"
              :autosize="{ minRows: 1, maxRows: 5 }"
              resize="none"
              :placeholder="formData.nickName?'回复@'+formData.nickName:inputText"
              @blur="handleBlur"
              @focus="handleFocus"
            ></el-input>
            <div class="comment-image" v-if="formData.imgPath">
              <Cover class="comment-image" :source="formData.url" item="1"></Cover>
              <span class="del iconfont icon-close" @click="delImage"></span>
            </div>
          </el-form-item>
        </el-form>
        <div :class="['op-panel',isFocused?'op-panel-active':'']">
          <div class="op-btns">
            <el-popover
              ref="elPopoverRef"
              :width="500"
              height="32px"
              trigger="click"
              :show-after="false"
              :offset="5"
              placement="bottom-start"
            >
              <template #reference>
                <div class="iconfont icon-emoji"></div>
              </template>
              <template #default>
                <el-tabs v-model="activeEmoji" @click.stop>
                  <el-tab-pane
                      :label="emoji.name"
                      :name="emoji.name"
                      v-for="emoji in emojiList"
                  >
                    <div class="emoji-list">
                      <div class="emoji-item"
                           v-for="item in emoji.emojiList"
                           @click="sendEmoji(item)">
                        {{item}}
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </el-popover>
            <div class="iconfont" @click="aiteP">
              <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
                <path d="M7.571333333333333 5.642906666666666C6.5793133333333325 5.642906666666666 5.642753333333333 6.618966666666666 5.642753333333333 8.000066666666665C5.642753333333333 9.381133333333333 6.5793133333333325 10.357199999999999 7.571333333333333 10.357199999999999C8.563333333333333 10.357199999999999 9.499866666666666 9.381133333333333 9.499866666666666 8.000066666666665C9.499866666666666 6.618966666666666 8.563333333333333 5.642906666666666 7.571333333333333 5.642906666666666zM4.642753333333333 8.000066666666665C4.642753333333333 6.225226666666666 5.8808066666666665 4.642906666666667 7.571333333333333 4.642906666666667C9.261833333333332 4.642906666666667 10.499866666666666 6.225226666666666 10.499866666666666 8.000066666666665C10.499866666666666 9.774866666666666 9.261833333333332 11.357199999999999 7.571333333333333 11.357199999999999C5.8808066666666665 11.357199999999999 4.642753333333333 9.774866666666666 4.642753333333333 8.000066666666665z" fill="currentColor"></path>
                <path d="M10.142933333333332 4.928546666666667C10.4191 4.928546666666667 10.642933333333332 5.152406666666666 10.642933333333332 5.428546666666667L10.642933333333332 9.2252C10.642933333333332 9.942633333333333 11.248999999999999 10.398666666666667 11.991566666666666 10.313733333333332C12.674966666666666 10.235533333333333 13.5227 9.639933333333332 13.621933333333333 8.034233333333333C13.639 7.7585999999999995 13.876199999999999 7.548966666666666 14.151833333333332 7.566033333333333C14.427433333333333 7.5830666666666655 14.637066666666666 7.8203 14.620033333333334 8.095933333333333C14.496433333333332 10.095066666666666 13.355166666666666 11.164233333333332 12.105233333333333 11.307233333333333C10.914533333333333 11.443466666666666 9.642933333333332 10.677233333333334 9.642933333333332 9.2252L9.642933333333332 5.428546666666667C9.642933333333332 5.152406666666666 9.866833333333332 4.928546666666667 10.142933333333332 4.928546666666667z" fill="currentColor"></path>
                <path d="M8 2.375C4.8934 2.375 2.375 4.8934 2.375 8C2.375 11.1066 4.8934 13.625 8 13.625C9.132133333333332 13.625 10.184733333333334 13.291066666666666 11.066533333333332 12.716433333333331C11.2979 12.5657 11.607666666666667 12.631033333333331 11.758433333333333 12.862400000000001C11.909166666666666 13.093733333333333 11.843833333333333 13.403533333333332 11.612466666666666 13.5543C10.5732 14.231499999999999 9.3318 14.625 8 14.625C4.3411133333333325 14.625 1.375 11.6589 1.375 8C1.375 4.3411133333333325 4.3411133333333325 1.375 8 1.375C11.6589 1.375 14.625 4.3411133333333325 14.625 8C14.625 8.276133333333332 14.401133333333334 8.5 14.125 8.5C13.848866666666666 8.5 13.625 8.276133333333332 13.625 8C13.625 4.8934 11.1066 2.375 8 2.375z" fill="currentColor"></path>
              </svg>
            </div>
            <el-upload ref="uploaderRef"
                       :multiple="false"
                       :show-file-list="false"
                       :http-request="selectFile"
                       :accept="proxy.imageAccept"
            >
              <div class="iconfont icon-image"></div>
            </el-upload>
          </div>
          <div class="send-btn">
            <el-button type="primary"@mousedown="submitComment">发送</el-button>
          </div>
        </div>
      </template>
      <div v-else class="no-send">该视频关闭评论</div>
    </div>
  </div>
</template>
<script setup>
import {getCurrentInstance, onBeforeUnmount, onMounted, onUnmounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useLoginStore} from "@/stores/loginStore.js"
import emojiList from "@/utils/Emoji.js";
import {commentsMsg} from "@/utils/WordMsg.js";
import {ElMessage} from "element-plus";
import {mitter} from "@/eventbus/eventBus.js";
import {AddComment, Upload_Comment} from "@/api/video.js";
import video_Nodata from "@/data/video_Nodata.json"

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const loginStore = useLoginStore();
const props = defineProps({
  sendType: {
    type: Number
  },
  showSend: {
    type: Boolean,
    default: true
  },
  inputText: {
    type: String,
    default: commentsMsg()
  }
});
const formData = ref({});
const formDataRef = ref();
const rules = ref({});
//插入表情
const elPopoverRef = ref();
const activeEmoji = ref('笑臉');
//选择表情
const sendEmoji = (emoji) => {
  isFocused.value = true;
  formData.value.content = formData.value.content?formData.value.content+emoji:emoji;
  elPopoverRef.value.hide();
};
//输入框焦点
const isFocused = ref(false);
const handleFocus = () => {
  isFocused.value = true;
};
//输入框失焦
const handleBlur = () => {
  setTimeout(() => {
    isFocused.value = false;
  }, 1000);
};
//选择图片
const selectFile = (file) => {
  formData.value.imgPath = file.file;
  formData.value.url= URL.createObjectURL(file.file);
};
const aiteP = () => {
  isFocused.value = true;
  formData.value.content = formData.value.content?formData.value.content+"@":"@";
};
//删除图片
const delImage = () => {
  formData.value.imgPath = null;
};
const submitComment = () => {
  if(loginStore.token == null||loginStore.token == ""
      ||Object.keys(loginStore.token).length === 0
      ||loginStore.uid == null||loginStore.uid == ""){
    ElMessage.error('请先登录~');
  }
  if(formData.value.content == null||formData.value.content == ""
      && formData.value.imgPath == null){
    ElMessage.warning('评论不能为空~');
    return;
  }
  formDataRef.value.validate(async (valid) => {
    if (valid) {
      if(formData.value.imgPath != null && formData.value.imgPath != ""){
        const imgRes = video_Nodata;
        if(imgRes.code === 200){
          formData.value.imgPath = imgRes.data;
        }else{
          ElMessage.error(imgRes.message)
          return;
        }
      }
      formData.value.userId = loginStore.uid;
      formData.value.videoId = route.params.videoId;
      if(formData.value.videoId == null||formData.value.videoId == ""){
        ElMessage.error('评论失败~');
        return;
      }
      const res = video_Nodata;
      if(res.code === 200){
        ElMessage.success('评论已经发送了~');
        mitter.emit('toComments', 1);
      } else
        ElMessage.error(res.message)
      formData.value.imgPath = null;
      formData.value.content = "";
    }else{
      ElMessage.error('请登录后再评论~');
    }
  });
};

onMounted(() => {
  mitter.on('initCommentData', (data) => {
    if(props.sendType !== 0){
      formData.value = Object.assign({}, data);
    }
  });
});
onBeforeUnmount(() => {
  mitter.off('initCommentData');
});
</script>
<style scoped lang="scss">
.send-panel{
  margin-top: 20px;
  display: flex;
  .imgBox{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }
  .input-panel{
    flex: 1;
    margin-left: 15px;
    :deep(.el-form-item){
      margin-bottom: 0;
    }
  }
  .no-send{
    background: #ebebeb;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    color: #999;
  }
  .input-area{
    border: 1px solid #f1f2f3;
    border-radius: 6px;
    padding: 14px 0;
    box-sizing: border-box;
    background-color: #f1f2f3;
    transition: 0.2s;
    cursor: text;
    &:hover,&:active{
      background-color: #ffffff;
      border-color: #c9ccd0;
    }
    :deep(.el-textarea__inner){
      box-shadow: none;
      background: none;
      padding: 0 8px;
    }
    :deep(.el-input__count){
        display: none !important;
    }
  }
  .input-area-active{
    background-color: #ffffff;
    border-color: #c9ccd0;
  }
  .comment-image{
    margin-left: 5px;
    margin-top: 5px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    position: relative;
    .del{
      position: absolute;
      top: 0;
      right: 0;
      background: #0003;
      color: #fff;
      width: 20px;
      height: 20px;
      text-align: center;
      justify-content: center;
      border-radius: 0 5px 0 5px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.op-panel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
  height: 0;
  .op-btns{
    display: flex;
    width: 34px;
    height: 24px;
    .iconfont{
      cursor: pointer;
      border: 1px solid #ddd;
      padding: 3px 8px;
      margin-right: 5px;
      border-radius: 5px;
    }
  }
}
.op-panel-active{
  visibility: revert;
  margin-top: 5px;
  height: 30px;
}
.emoji-list{
  .emoji-item{
    float: left;
    font-size: 23px;
    padding: 2px;
    text-align: center;
    border-radius: 3px;
    margin-left: 10px;
    margin-top: 5px;
    cursor: pointer;
  }
  &:hover{
    background: #ddd !important;
  }
}
</style>